<template>
  <div class="login-wrapper">
    <login-header />
    <div class="login-container">
      <div class="title-container">
        <h1 class="title margin-no">登录到</h1>
        <h1 class="title">MyAdmin System</h1>
        <div class="sub-title">
          <p class="tip">{{ type == 'register' ? '已有账号?' : type == 'forgot' ? '已有账号?' : '没有账号吗?' }}</p>
          <p class="tip" @click="switchType(type == 'register' ? 'login' : (type == 'forgot' ? 'login' : 'register'))">
            {{ type == 'register' ? '登录' : type == 'forgot' ? '登录' : '注册新账号' }}
          </p>
        </div>
      </div>
      <login v-if="type === 'login'" @forgot-password="type='forgot'" />
      <register v-else-if="type === 'register'" @register-success="switchType('login')" />
      <forgot-password v-else @back="switchType('login')" />
      <tdesign-setting />
    </div>

    <footer class="copyright">自用后台管理系统</footer>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';

import Login from './components/Login.vue';
import Register from './components/Register.vue';
import LoginHeader from './components/Header.vue';
import ForgotPassword from './components/ForgotPassword.vue';

const type = ref<'login'|'register'|'forgot'>('login');
const switchType = (val: 'login'|'register'|'forgot') => {
  type.value = val;
};
</script>

<style lang="less" scoped>
@import url('./Login.less');
</style>
